<template>
   <!-- 加载图标样式9 -->
   <div class="loading">
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
   </div>
</template>

<script setup>

</script>

<style scoped lang='scss'>
.loading {
   box-sizing: border-box;
   color: #000;
   display: block;
   font-size: 0;
   height: 10px;
   position: relative;
   text-align: center;
   width: 100px
}

.loading>div {
   animation: ball-elastic-dots-anim 1s infinite;
   border-radius: 100%;
   box-sizing: border-box;
   display: inline-block;
   float: none;
   height: 10px;
   position: relative;
   white-space: nowrap;
   width: 10px
}

.loading>div:first-child {
   background-color: #1678ff
}

.loading>div:nth-child(2) {
   background-color: #04be02
}

.loading>div:nth-child(3) {
   background-color: #ea4e3d
}

.loading>div:nth-child(4) {
   background-color: #ffaa09
}

.loading>div:nth-child(5) {
   background-color: #e229ff
}

@keyframes ball-elastic-dots-anim {
   0%,
   to {
      margin: 0;
      transform: scale(1)
   }

   50% {
      margin: 0 4%;
      transform: scale(.65)
   }
}
</style>
